<template>
	<div class="common-layout">
		<!-- 首页页面布局 -->
		<el-container class="lay-container">
			<!-- 自定义左侧的组件 -->
		<CommonAside/>
			<el-container>
				<el-header class="el-header">
					<!-- 头部组件 -->
				<CommonHeader/>
				</el-header>
				<el-main class="right-main">
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
import CommonAside from "@/components/CommonAside.vue"
import CommonHeader from "@/components/CommonHeader.vue"
import { RouterView } from "vue-router";
</script>

<style lang="less" scoped>
	.common-layout,
	.lay-container {
		height: 100%;
	}

	.el-header {
		background-color: #333;
		padding: 0;
		display: flex;
		align-items: center;
	}

	.right-main {
		padding: 20px;
		background-color: #f5f7fa;
		overflow-y: auto;
		height: calc(100vh - 60px);
	}
</style>